<!DOCTYPE html>
<html lang="zh-CN">





<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" sizes="76x76" href="/img/apple-touch-icon.jpg">
  <link rel="icon" type="image/png" href="/img/favicon.jpg">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  
  <meta name="theme-color" content="#2f4154">
  <meta name="description" content="前端学习交流">
  <meta name="author" content="小侯爷">
  <meta name="keywords" content="">
  <title>来抛硬币 TossCoin - 小侯爷的前端画室</title>

  <link  rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.4.1/css/bootstrap.min.css" />
<link  rel="stylesheet" href="https://cdn.staticfile.org/github-markdown-css/4.0.0/github-markdown.min.css" />


  <link  rel="stylesheet" href="https://cdn.staticfile.org/highlight.js/10.0.0/styles/vs2015.min.css" />


<!-- 主题依赖的图标库，不要自行修改 -->

<link rel="stylesheet" href="//at.alicdn.com/t/font_1749284_fmb4a04yx8h.css">



<link rel="stylesheet" href="//at.alicdn.com/t/font_1736178_pjno9b9zyxs.css">




<link  rel="stylesheet" href="/css/main.css" />

<!-- 自定义样式保持在最底部 -->

  
<link rel="stylesheet" href="/css/dark.css">



  <script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?838b8f18434ba2e0a7cf1855bd16fc57";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
  </script>
<meta name="generator" content="Hexo 4.2.1"></head>


<body>
  <div id="dark" onclick="switchDarkMode()"></div>
  <script>
    var isNight = new Date().getHours() >= 22 || new Date().getHours() < 7; // 指定时间
    // 依次判断 系统暗黑模式 指定时间 缓存 dark
    if( matchMedia('(prefers-color-scheme: dark)').matches || isNight || localStorage.getItem('dark') === '1') {
      if(!(isNight&&localStorage.getItem('noDark') === '1')) {
        document.body.classList.add('dark');
      }
    }
    let sun = '<img class="dark-img" src="https://frontend-studio-1256354221.file.myqcloud.com/img/sun.png" srcset="/img/loading.gif">';
    let moon = '<img class="dark-img" src="https://frontend-studio-1256354221.file.myqcloud.com/img/moon.png" srcset="/img/loading.gif">'
    document.getElementById('dark').innerHTML = document.querySelector("body").classList.contains("dark")?moon:sun;
    //点击事件
    function switchDarkMode() {
    	if ($('body').hasClass('dark')) {
        $("#dark").html("<img class='dark-img' src='https://frontend-studio-1256354221.file.myqcloud.com/img/sun.png'>");
    		document.body.classList.remove('dark');
    		localStorage.setItem('noDark', '1');
    		localStorage.setItem('dark', '0');
    	} else {
        $("#dark").html("<img class='dark-img' src='https://frontend-studio-1256354221.file.myqcloud.com/img/moon.png'>");
    		document.body.classList.add('dark');
    		localStorage.setItem('dark', '1');
    		localStorage.setItem('noDark', '0');
    	}
    }
  </script>
  <header style="height: 70vh;">
    <nav id="navbar" class="navbar fixed-top  navbar-expand-lg navbar-dark scrolling-navbar">
  <div class="container">
    <a class="navbar-brand"
       href="/">&nbsp;<strong>小侯爷的前端画室</strong>&nbsp;</a>

    <button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <div class="animated-icon"><span></span><span></span><span></span></div>
    </button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto text-center">
        
          
          
          
          <li class="nav-item">
            <a class="nav-link" href="/index/">
              <i class="iconfont icon-home-fill"></i>
              首页</a>
          </li>
        
          
          
          
          <li class="nav-item">
            <a class="nav-link" href="/game/">
              <i class="iconfont icon-switch-fill"></i>
              游戏堂</a>
          </li>
        
          
          
          
          <li class="nav-item">
            <a class="nav-link" href="/photo/">
              <i class="iconfont icon-images"></i>
              相册集</a>
          </li>
        
          
          
          
          <li class="nav-item">
            <a class="nav-link" href="/archives/">
              <i class="iconfont icon-archive-fill"></i>
              文章归档</a>
          </li>
        
          
          
          
          <li class="nav-item">
            <a class="nav-link" href="/about/">
              <i class="iconfont icon-user-fill"></i>
              关于</a>
          </li>
        
        
          <li class="nav-item" id="search-btn">
            <a class="nav-link" data-toggle="modal" data-target="#modalSearch">&nbsp;&nbsp;<i
                class="iconfont icon-search"></i>&nbsp;&nbsp;</a>
          </li>
        
      </ul>
    </div>
  </div>
</nav>

    <div class="view intro-2" id="background" parallax=true
         style="background: url('https://frontend-studio-1256354221.file.myqcloud.com/img/banner_2.jpg') no-repeat center center;
           background-size: cover;">
      <div class="full-bg-img">
        <div class="mask flex-center" style="background-color: rgba(0, 0, 0, 0.3)">
          <div class="container text-center white-text fadeInUp">
            <span class="h2" id="subtitle">
              
            </span>

            
              
                <div class="mt-3 post-meta">
                  <i class="iconfont icon-date-fill" aria-hidden="true"></i>
                  <time datetime="2020-03-13 00:00">
                    2020年3月13日 凌晨
                  </time>
                </div>
              

              <div class="mt-1">
                
                  
                  <span class="post-meta mr-2">
                    <i class="iconfont icon-chart"></i>
                    1.4k 字
                  </span>
                

                
                  
                  <span class="post-meta mr-2">
                      <i class="iconfont icon-clock-fill"></i>
                    
                    
                    16
                     分钟
                  </span>
                

                
              </div>
            
          </div>

          
        </div>
      </div>
    </div>
  </header>

  <main>
    
      

<div class="container-fluid">
  <div class="row">
    <div class="d-none d-lg-block col-lg-2"></div>
    <div class="col-lg-8 nopadding-md">
      <div class="container nopadding-md" id="board-ctn">
        <div class="py-5" id="board">
          <div class="post-content mx-auto" id="post">
            
            <article class="markdown-body">
              <p>抛硬币，并不是因为硬币能帮你决定什么，而是因为在硬币抛出的那一刻，答案便会出现在你心里。</p>
<div class="note note-success">
            <p>已开源</p>
          </div>

<h2 id="DEMO"><a href="#DEMO" class="headerlink" title="DEMO"></a>DEMO</h2><h3 id="演示"><a href="#演示" class="headerlink" title="演示"></a>演示</h3><p><img src="https://frontend-studio-1256354221.file.myqcloud.com/demo/tossCoinDEMO.gif" srcset="/img/loading.gif" alt="demo"></p>
<h2 id="微信小程序码"><a href="#微信小程序码" class="headerlink" title="微信小程序码"></a>微信小程序码</h2><p><img src="https://frontend-studio-1256354221.file.myqcloud.com/demo/tossCoinwxQRcode.jpg" srcset="/img/loading.gif" alt="微信小程序码"></p>
<h2 id="支付宝小程序码"><a href="#支付宝小程序码" class="headerlink" title="支付宝小程序码"></a>支付宝小程序码</h2><p><img src="https://frontend-studio-1256354221.file.myqcloud.com/demo/tossCoinzfbQRcode.jpg" srcset="/img/loading.gif" alt="支付宝小程序码"></p>
<h3 id="开源地址：https-github-com-xiaohouye1995-tossCoin"><a href="#开源地址：https-github-com-xiaohouye1995-tossCoin" class="headerlink" title="开源地址：https://github.com/xiaohouye1995/tossCoin"></a>开源地址：<a href="https://github.com/xiaohouye1995/tossCoin" target="_blank" rel="noopener">https://github.com/xiaohouye1995/tossCoin</a></h3><h2 id="运行平台"><a href="#运行平台" class="headerlink" title="运行平台"></a>运行平台</h2><p>微信小程序、支付宝小程序、H5、ios、安卓</p>
<p>使用 uni-app 开发，除微信小程序、支付宝小程序外，其他端未测试</p>
<h2 id="框架-工具"><a href="#框架-工具" class="headerlink" title="框架/工具"></a>框架/工具</h2><ul>
<li>uni-app</li>
<li>耳聆网（音效） <a href="https://www.ear0.com/search/word-%E7%A1%AC%E5%B8%81" target="_blank" rel="noopener">https://www.ear0.com/search/word-%E7%A1%AC%E5%B8%81</a></li>
<li>中国金币网（硬币图片）<a href="http://www.chngc.net/" target="_blank" rel="noopener">http://www.chngc.net/</a></li>
<li>加拿大金币网（十二星座）<a href="https://www.mint.ca/store/search/searchResults.jsp?_requestid=510053" target="_blank" rel="noopener">https://www.mint.ca/store/search/searchResults.jsp?_requestid=510053</a></li>
<li>Popup 弹出层 <a href="https://ext.dcloud.net.cn/plugin?id=329" target="_blank" rel="noopener">https://ext.dcloud.net.cn/plugin?id=329</a></li>
</ul>
<h2 id="功能需求"><a href="#功能需求" class="headerlink" title="功能需求"></a>功能需求</h2><ul>
<li><input disabled="" type="checkbox"> 抛掷方式选择</li>
<li><input checked="" disabled="" type="checkbox"> 硬币浮光</li>
<li><input checked="" disabled="" type="checkbox"> 硬币3D旋转</li>
<li><input checked="" disabled="" type="checkbox"> 硬币阴影</li>
<li><input checked="" disabled="" type="checkbox"> 硬币种类选择</li>
<li><input disabled="" type="checkbox"> 自定义硬币图片</li>
<li><input checked="" disabled="" type="checkbox"> 音效</li>
<li><input checked="" disabled="" type="checkbox"> 音效选择</li>
<li><input checked="" disabled="" type="checkbox"> 背景皮肤</li>
<li><input checked="" disabled="" type="checkbox"> 提示语，抛硬币理论</li>
<li><input checked="" disabled="" type="checkbox"> 抛掷统计</li>
<li><input checked="" disabled="" type="checkbox"> 抛掷次数</li>
<li><input checked="" disabled="" type="checkbox"> 字次数，占比</li>
<li><input checked="" disabled="" type="checkbox"> 人头次数，占比</li>
<li><input checked="" disabled="" type="checkbox"> 清空数据</li>
<li><input disabled="" type="checkbox"> 报警监控</li>
<li><input disabled="" type="checkbox"> APP端</li>
<li><input checked="" disabled="" type="checkbox"> 我要吐槽-意见反馈</li>
<li><input checked="" disabled="" type="checkbox"> 彩蛋 （等待你的发现~~）</li>
<li><input disabled="" type="checkbox"> 弹出框美化</li>
<li><input checked="" disabled="" type="checkbox"> 转发分享</li>
<li><input checked="" disabled="" type="checkbox"> 适配小程序pc（ipad）端</li>
<li><input disabled="" type="checkbox"> 触摸震动</li>
<li><input checked="" disabled="" type="checkbox"> 支付宝版小程序</li>
<li><input checked="" disabled="" type="checkbox"> 十二星座系列硬币</li>
<li><input disabled="" type="checkbox"> 转uniCloud</li>
<li><input checked="" disabled="" type="checkbox"> 彩蛋硬币皮肤，在彩蛋页下放置彩蛋码，在硬币皮肤页输入彩蛋码，获得皮肤；</li>
<li><input checked="" disabled="" type="checkbox"> 视频广告激励</li>
<li><input checked="" disabled="" type="checkbox"> 插屏广告</li>
<li><input disabled="" type="checkbox"> 背景选择界面交互优化，参考起点APP阅读背景选择页面</li>
<li><input disabled="" type="checkbox"> 联动古代银钱换算器，袁大头硬币皮肤</li>
<li><input checked="" disabled="" type="checkbox"> 使用cdn缓存，提高加载速度</li>
<li><input disabled="" type="checkbox"> 优化- 图片缓加载</li>
</ul>
<h2 id="填坑"><a href="#填坑" class="headerlink" title="填坑"></a>填坑</h2><h3 id="animation-没能重复触发"><a href="#animation-没能重复触发" class="headerlink" title="animation 没能重复触发"></a>animation 没能重复触发</h3><p>现象：第二次抛掷结果和上一次相同时，没有发生旋转效果</p>
<p>原因：animation 没能重复触发</p>
<p>解决：使用 setTimeout 方法，先移除 class 在添加新的 class 重新触发 animation</p>
<h3 id="transform-使-border-radius-失效"><a href="#transform-使-border-radius-失效" class="headerlink" title="transform 使 border-radius 失效"></a>transform 使 border-radius 失效</h3><p>现象：硬币扫光效果，在移动端会超出硬币范围显示</p>
<p>原因：transform 使 border-radius 失效</p>
<p>解决：使用 mask-image: radial-gradient(white, black);</p>
<h3 id="目标旋转90度后，成平行状态，以默认角度无法观测到"><a href="#目标旋转90度后，成平行状态，以默认角度无法观测到" class="headerlink" title="目标旋转90度后，成平行状态，以默认角度无法观测到"></a>目标旋转90度后，成平行状态，以默认角度无法观测到</h3><p>现象：rotateX() 为90deg 时，不能显示</p>
<p>原因： 目标旋转90度后，成平行状态，以默认角度无法观测到</p>
<p>解决：使用 perspective(100px) 调整角度</p>
<h3 id="rotateY-180deg-方法使图片进行翻转，但是每次运行时，被不断触发"><a href="#rotateY-180deg-方法使图片进行翻转，但是每次运行时，被不断触发" class="headerlink" title="rotateY(180deg) 方法使图片进行翻转，但是每次运行时，被不断触发"></a>rotateY(180deg) 方法使图片进行翻转，但是每次运行时，被不断触发</h3><p>现象：小程序真机运行下，硬币反面不断镜像翻转直到停下</p>
<p>原因：rotateY(180deg) 方法使图片进行翻转，但是每次运行时，被不断触发</p>
<p>解决：将图片翻转放在该目标的子元素上</p>
<h3 id="导入字体文件后，报错，影响界面渲染"><a href="#导入字体文件后，报错，影响界面渲染" class="headerlink" title="导入字体文件后，报错，影响界面渲染"></a>导入字体文件后，报错，影响界面渲染</h3><p>现象：小程序真机运行下，界面内容显示不全</p>
<p>原因：导入字体文件后，报错，影响界面渲染</p>
<p>解决：修改导入字体方式，如下：</p>
<div class="hljs"><pre><code class="hljs plain">把iconfont.css 的全部代码 全部复制到App.vue文件style里
或者（在static目录下创建一个css文件，在main.js引入即可 import &quot;.&#x2F;static&#x2F;icon-font&#x2F;iconfont.css&quot;）
然后 删除 src: url(&#39;iconfont.eot?t&#x3D;1562306471309&#39;); &#x2F; IE9 &#x2F;
url(&#39;iconfont.woff?t&#x3D;1562306471309&#39;) format(&#39;woff&#39;),
url(&#39;iconfont.ttf?t&#x3D;1562306471309&#39;) format(&#39;truetype&#39;), &#x2F; chrome, firefox, opera, Safari, Android, iOS 4.2+ &#x2F;
url(&#39;iconfont.svg?t&#x3D;1562306471309#iconfont&#39;) format(&#39;svg&#39;); &#x2F; iOS 4.1- &#x2F;
只保留转为base64的 woff2的即可</code></pre></div>
<h3 id="硬币旋转的音效延迟"><a href="#硬币旋转的音效延迟" class="headerlink" title="硬币旋转的音效延迟"></a>硬币旋转的音效延迟</h3><p>现象：硬币旋转的音效延迟</p>
<p>原因：音效加载时间长，加上音频文件较大，而且需要网络下载</p>
<p>解决：使用 onPlay() 方法，等待音频加载后再旋转硬币，另外压缩音频文件体积，并放入本地文件中</p>
<h3 id="无法修改-button-样式"><a href="#无法修改-button-样式" class="headerlink" title="无法修改 button 样式"></a>无法修改 button 样式</h3><p>现象：无法修改 button 样式</p>
<p>原因：uni-app 自带的border</p>
<p>解决：用 button::after{ border: none;} 可以去掉</p>
<h3 id="“navigationBarTextStyle”-“black”-属性在支付宝小程序中无效"><a href="#“navigationBarTextStyle”-“black”-属性在支付宝小程序中无效" class="headerlink" title="“navigationBarTextStyle”: “black” 属性在支付宝小程序中无效"></a>“navigationBarTextStyle”: “black” 属性在支付宝小程序中无效</h3><p>现象：”navigationBarTextStyle”: “black” 属性在支付宝小程序中无效</p>
<p>原因：支付宝小程序文字颜色和标题前景色共用一个属性</p>
<p>解决：navigationBarBackgroundColor属性不在支付宝小程序中使用</p>
<div class="hljs"><pre><code class="hljs css">"<span class="hljs-selector-tag">globalStyle</span>": &#123;
	"navigationBarTextStyle": "black",
	"<span class="hljs-selector-tag">navigationBarTitleText</span>": "来抛硬币",
	// #ifdef MP-WEIXIN
	"<span class="hljs-selector-tag">navigationBarBackgroundColor</span>": "<span class="hljs-selector-id">#f8f8f8</span>",
	// #endif
	"<span class="hljs-selector-tag">backgroundColor</span>": "<span class="hljs-selector-id">#f7f8fa</span>"
&#125;</code></pre></div>

<h3 id="支付宝小程序页面不能自适应高度"><a href="#支付宝小程序页面不能自适应高度" class="headerlink" title="支付宝小程序页面不能自适应高度"></a>支付宝小程序页面不能自适应高度</h3><p>现象：支付宝小程序页面不能自适应高度</p>
<p>原因：支付宝小程序 没有 page 根元素标签</p>
<p>解决：最外层加一个view标签，style=“height:100vh”</p>
<h3 id="腾讯云对象存储使用CDN后，CDN监控后台无访问日志"><a href="#腾讯云对象存储使用CDN后，CDN监控后台无访问日志" class="headerlink" title="腾讯云对象存储使用CDN后，CDN监控后台无访问日志"></a>腾讯云对象存储使用CDN后，CDN监控后台无访问日志</h3><p>现象：CDN访问域名无访问日志</p>
<p>原因：直接访问COS的域名，是不会经过CDN</p>
<p>解决：修改cos域名地址为CDN地址</p>
<h3 id="本地修改json数据"><a href="#本地修改json数据" class="headerlink" title="本地修改json数据"></a>本地修改json数据</h3><p>暂时未找到方法，改为使用 setStorageSync 将json中需要修改的数据id存入本地缓存，再进入页面读取json数据时，通过双重循环来修改数据</p>
<div class="hljs"><pre><code class="hljs js"><span class="hljs-keyword">import</span> coinJson <span class="hljs-keyword">from</span> <span class="hljs-string">'../../static/json/coin.json'</span>
<span class="hljs-comment">// 获取硬币列表</span>
getCoinList() &#123;
	<span class="hljs-keyword">this</span>.coins = coinJson.data
	<span class="hljs-keyword">let</span> unlockList = uni.getStorageSync(<span class="hljs-string">'unlockList'</span>) || [];
	<span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> item <span class="hljs-keyword">of</span> <span class="hljs-keyword">this</span>.coins[<span class="hljs-number">1</span>].list) &#123;
		<span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> item2 <span class="hljs-keyword">of</span> unlockList) &#123;
			<span class="hljs-keyword">if</span> (item.value === item2) &#123;
				item.status = <span class="hljs-literal">true</span>
			&#125;
		&#125;
	&#125;
&#125;,
<span class="hljs-comment">// 解锁硬币皮肤</span>
unlockCoin() &#123;
	<span class="hljs-keyword">let</span> unlockList = uni.getStorageSync(<span class="hljs-string">'unlockList'</span>) || [];
    unlockList.push(<span class="hljs-keyword">this</span>.coinid)
    uni.setStorageSync(<span class="hljs-string">'unlockList'</span>, unlockList);
&#125;,</code></pre></div>

<h3 id="css绝对定位居中"><a href="#css绝对定位居中" class="headerlink" title="css绝对定位居中"></a>css绝对定位居中</h3><div class="hljs"><pre><code class="hljs css"><span class="hljs-selector-class">.conter</span>&#123;
    <span class="hljs-attribute">width</span>: <span class="hljs-number">600px</span>; <span class="hljs-attribute">height</span>: <span class="hljs-number">400px</span>;
    <span class="hljs-attribute">position</span>: absolute; <span class="hljs-attribute">left</span>: <span class="hljs-number">50%</span>; <span class="hljs-attribute">top</span>: <span class="hljs-number">50%</span>;
    <span class="hljs-attribute">transform</span>: <span class="hljs-built_in">translate</span>(-<span class="hljs-number">50%</span>, -<span class="hljs-number">50%</span>);    <span class="hljs-comment">/* 50%为自身尺寸的一半 */</span>
&#125;</code></pre></div>

<h3 id="css灰度滤镜"><a href="#css灰度滤镜" class="headerlink" title="css灰度滤镜"></a>css灰度滤镜</h3><div class="hljs"><pre><code class="hljs css"><span class="hljs-selector-tag">div</span> &#123;
    <span class="hljs-attribute">filter</span>: <span class="hljs-built_in">grayscale</span>(<span class="hljs-number">100%</span>);
&#125;</code></pre></div>
            </article>
            <hr>
            <div>
              <div class="post-metas mb-3">
                
                  <div class="post-meta mr-3">
                    <i class="iconfont icon-category"></i>
                    
                      <a class="hover-with-bg" href="/categories/%E9%A1%B9%E7%9B%AE%E5%AE%9E%E9%AA%8C%E5%AE%A4/">项目实验室</a>
                    
                  </div>
                
                
                  <div class="post-meta">
                    <i class="iconfont icon-tags"></i>
                    
                      <a class="hover-with-bg" href="/tags/vue/">vue</a>
                    
                      <a class="hover-with-bg" href="/tags/uni-app/">uni-app</a>
                    
                  </div>
                
              </div>
              
                <p class="note note-warning">本博客所有文章除特别声明外，均采用 <a href="https://zh.wikipedia.org/wiki/Wikipedia:CC_BY-SA_3.0%E5%8D%8F%E8%AE%AE%E6%96%87%E6%9C%AC" target="_blank" rel="nofollow noopener noopener">CC BY-SA 3.0协议</a> 。转载请注明出处！</p>
              
              
                <div class="post-prevnext row">
                  <div class="post-prev col-6">
                    
                    
                      <a href="/2020/03/30/AncientCurrencyConverter/">
                        <i class="iconfont icon-arrowleft"></i>
                        <span class="hidden-mobile">AncientCurrencyConverter 古代银钱换算器</span>
                        <span class="visible-mobile">上一篇</span>
                      </a>
                    
                  </div>
                  <div class="post-next col-6">
                    
                    
                      <a href="/2019/11/20/2019112001/">
                        <span class="hidden-mobile">vue实现tab列表横向滚动时点击居中</span>
                        <span class="visible-mobile">下一篇</span>
                        <i class="iconfont icon-arrowright"></i>
                      </a>
                    
                  </div>
                </div>
              
            </div>

            
              <!-- Comments -->
              <div class="comments" id="comments">
                
                
  <div id="vcomments"></div>
  <script defer src="https://cdn.staticfile.org/valine/1.4.14/Valine.min.js" ></script>

  <script type="text/javascript">
    var oldLoadVa = window.onload;
    window.onload = function () {
      oldLoadVa && oldLoadVa();

      new Valine({
        el: "#vcomments",
        app_id: "Xj9NvwN7LBLvF2dqHLeRY1ix-gzGzoHsz",
        app_key: "kYB3rhk7JSGIP0RNTvgh7HMq",
        placeholder: "说点什么",
        path: window.location.pathname,
        avatar: "retro",
        meta: ["nick","mail","link"],
        pageSize: "10",
        lang: "zh-CN",
        highlight: false,
        recordIP: false,
        serverURLs: "",
      });
    };
  </script>
  <noscript>Please enable JavaScript to view the <a href="https://valine.js.org" target="_blank" rel="nofollow noopener noopener">comments
      powered by Valine.</a></noscript>


              </div>
            
          </div>
        </div>
      </div>
    </div>
    
      <div class="d-none d-lg-block col-lg-2 toc-container" id="toc-ctn">
        <div id="toc">
  <p class="toc-header"><i class="iconfont icon-list"></i>&nbsp;目录</p>
  <div id="tocbot"></div>
</div>

      </div>
    
  </div>
</div>

<!-- Custom -->


    
  </main>

  
    <a id="scroll-top-button" href="#" role="button">
      <i class="iconfont icon-arrowup" aria-hidden="true"></i>
    </a>
  

  
    <div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">搜索</h4>
        <button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <input type="text" id="local-search-input" class="form-control validate">
          <label data-error="x" data-success="v"
                 for="local-search-input">关键词</label>
        </div>
        <div class="list-group" id="local-search-result"></div>
      </div>
    </div>
  </div>
</div>
  

  

  

  <footer class="mt-5">
  <div class="text-center py-3">
    <div>
      <a href="#"><span>前端画室</span></a>
      <i class="iconfont icon-love"></i>
      <a href="https://github.com/xiaohouye1995" target="_blank" rel="nofollow noopener">
        <span>小侯爷</span></a>
    </div>
    

    

    
  </div>
</footer>

<!-- SCRIPTS -->
<script  src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js" ></script>
<script  src="https://cdn.staticfile.org/twitter-bootstrap/4.4.1/js/bootstrap.min.js" ></script>
<script  src="/js/main.js" ></script>


  <script  src="/js/lazyload.js" ></script>



  
  <script  src="https://cdn.staticfile.org/tocbot/4.11.1/tocbot.min.js" ></script>
  <script>
    $(document).ready(function () {
      var boardCtn = $('#board-ctn');
      var boardTop = boardCtn.offset().top;

      tocbot.init({
        tocSelector: '#tocbot',
        contentSelector: '.post-content',
        headingSelector: 'h1,h2,h3,h4,h5,h6',
        linkClass: 'tocbot-link',
        activeLinkClass: 'tocbot-active-link',
        listClass: 'tocbot-list',
        isCollapsedClass: 'tocbot-is-collapsed',
        collapsibleClass: 'tocbot-is-collapsible',
        collapseDepth: 0,
        scrollSmooth: true,
        headingsOffset: -boardTop
      });
      if ($('.toc-list-item').length > 0) {
        $('#toc').css('visibility', 'visible');
      }
    });
  </script>





  <script defer src="https://cdn.staticfile.org/clipboard.js/2.0.6/clipboard.min.js" ></script>
  <script  src="/js/clipboard-use.js" ></script>






<!-- Plugins -->



  <script  src="https://cdn.staticfile.org/typed.js/2.0.11/typed.min.js" ></script>
  <script>
    var typed = new Typed('#subtitle', {
      strings: [
        '  ',
        "来抛硬币 TossCoin&nbsp;",
      ],
      cursorChar: "_",
      typeSpeed: 70,
      loop: false,
    });
    typed.stop();
    $(document).ready(function () {
      $(".typed-cursor").addClass("h2");
      typed.start();
    });
  </script>



  <script  src="https://cdn.staticfile.org/anchor-js/4.2.2/anchor.min.js" ></script>
  <script>
    anchors.options = {
      placement: "right",
      visible: "hover",
      
    };
    var el = "h1,h2,h3,h4,h5,h6".split(",");
    var res = [];
    for (item of el) {
      res.push(".markdown-body > " + item)
    }
    anchors.add(res.join(", "))
  </script>



  <script  src="/js/local-search.js" ></script>
  <script>
    var path = "/local-search.xml";
    var inputArea = document.querySelector("#local-search-input");
    inputArea.onclick = function () {
      searchFunc(path, 'local-search-input', 'local-search-result');
      this.onclick = null
    }
  </script>



  <script  src="https://cdn.staticfile.org/fancybox/3.5.7/jquery.fancybox.min.js" ></script>
  <link  rel="stylesheet" href="https://cdn.staticfile.org/fancybox/3.5.7/jquery.fancybox.min.css" />

  <script>
    $('#post img:not(.no-zoom img, img[no-zoom]), img[zoom]').each(
      function () {
        var element = document.createElement('a');
        $(element).attr('data-fancybox', 'images');
        $(element).attr('href', $(this).attr('src'));
        $(this).wrap(element);
      }
    );
  </script>


















  </body>
</html>
